<script lang="ts" setup>
import {inject, onMounted, ref} from "vue";
import Bus from "@/utils/bus";
import {useUserStore} from "@/store/user";
import router from "@/router";
let loginBtnShow = ref(true);
let headIcon = ref(null);
let username = ref(null);
let id = ref(null);
const userStore = useUserStore();
//去登陆
const gotoLoginPage = () => {
  router.push('/login');
}
//头像失败
const errorHandler = () => true
const logout = ()=>{
  userStore.delUserInfo();
  loginBtnShow.value = true;
}

onMounted(() => {
  let user = useUserStore().userInfo;
  if (user !==undefined){
    loginBtnShow.value = false;
    headIcon.value = user.headIcon;
    username.value = user.username;
  }
})

//跳转个人中心页面
const userDetailClick =  () => {
  let user = useUserStore().userInfo;
  id.value = user.id;
  router.push({
    path:'/userDetail/',
    query:{
      "id": id.value,
    }
  });
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="menu-container">
          <el-menu
              :ellipsis="false"
              :router="true"
              class="el-menu-demo"
              default-active="/chat"
              mode="horizontal"
          >
            <el-menu-item index="/index">
              <img
                  alt="Element logo"
                  src="../assets/htuLogo.png"
                  style="width: 100%; height: 100%"
              />
            </el-menu-item>
            <el-menu-item index="/allCourses">
              <template #title>所有课程</template>
            </el-menu-item>
            <el-menu-item index="/myCourses">
              <template #title>我的课程</template>
            </el-menu-item>
            <el-menu-item index="/talk">
              <template #title>讨论区</template>
            </el-menu-item>
            <el-menu-item index="/exam">
              <template #title>我的考试</template>
            </el-menu-item>

            <el-sub-menu index="2-1">
              <template #title>功能</template>
              <el-menu-item index="/chat">chat</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/aboutUs">
              <template #title>关于我们</template>
            </el-menu-item>
            <el-button v-if="loginBtnShow" :size="'small'" round style="margin-left: auto;margin-top: 1%" type="primary" @click="gotoLoginPage">登陆</el-button>
            <div v-if="!loginBtnShow" style="margin-left: auto; margin-top: -1%">
              <el-tooltip :content="username" placement="top">
              <el-avatar :size="30" :src="headIcon" @error="errorHandler" style="margin-top: 30%;" @click="userDetailClick">
                <img
                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                 alt=""/>
              </el-avatar>
              </el-tooltip>
              <span>&nbsp; </span>
              <el-button v-if="!loginBtnShow" :size="'small'" round type="danger" @click="logout" style="margin-top: -25%">注销</el-button>
            </div>
          </el-menu>
        </div>
      </el-header>
      <el-main>
        <RouterView/>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
</style>